<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <span th:include="~{include::xxx}"></span>
    <style>
        ul li{
            margin-right: 100px;
        }
        ul li a{
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //验证密码
            $("[name='password']").blur(function(){
                var pwd=$(this).val();
                if(pwd.length==0){
                    $("#sp_pwd1").html("<font color='red'>密码不能为空！</font>");
                }else if(pwd.length>0){
                    //6位数字
                    $.get(
                        pwd+"/isPwd",
                        function(obj){
                            if(obj){
                                $("#sp_pwd1").html("<font color='green'>OK！</font>");
                                return true;
                            }else{
                                $("#sp_pwd1").html("<font color='red'>请输入六位数字！</font>");
                                return false;
                            }
                        }
                    )
                }
            });// end
            //验证密码一致性
            $("[name='password1']").blur(function(){
                var p1= $("[name='password']").val();
                var p2=$(this).val();
                if(p1!=p2){
                    $("#sp_pwd2").html("<font color='red'>两次密码不一致！</font>");
                    return false;
                }else{
                    $("#sp_pwd2").html("<font color='green'>OK！</font>");
                    return true;
                }
            })
            //验证余额
            $("[name='balance']").blur(function(){
                var money=$(this).val();
                if(money!='0'){
                    $.get(
                        money+'/isBalance',
                        function(obj){
                            if(obj){
                                $("#sp_balance").html("<font clolr='green'>OK</font>");
                            }else{
                                $("#sp_balance").html("<font clolr='red'>金额只能是数字且不能是0开头</font>");
                            }
                        }
                    )
                }
            })
        })
    </script>
</head>
<body>
       <div class="container">
           <div class="alert alert-success">
               <marquee>
               <h3>振涛银行欢迎您</h3>
               </marquee>
           </div>

           <ul class="nav nav-pills">
               <li class="active"><a href="#">首页</a></li>
               <li><a href="register">注册</a></li>
               <li><a href="#">登录</a></li>
               <li><a href="#">明细</a></li>
               <li><a href="#">注销</a></li>
           </ul>
          <br>

           <form class="form-horizontal" action="open" role="form" method="post">
               <div class="form-group">
                   <label  class="col-sm-2 control-label">卡号：</label>
                   <div class="col-sm-4">
                       <input type="text" class="form-control" th:value="${session.card}" name="cardnum"  readonly="readonly">
                       <span id="sp_name"></span>
                   </div>
               </div>

               <div class="form-group">
                   <label  class="col-sm-2 control-label">设置密码：</label>
                   <div class="col-sm-4">
                       <input type="password" class="form-control"  name="password" placeholder="6位数字密码">
                       <span id="sp_pwd1"></span>
                   </div>
               </div>
               <div class="form-group">
                   <label  class="col-sm-2 control-label">确认密码：</label>
                   <div class="col-sm-4">
                       <input type="password" class="form-control"  name="password1" placeholder="确认密码">
                       <span id="sp_pwd2"></span>
                   </div>
               </div>

               <div class="form-group">
                   <label  class="col-sm-2 control-label">预存金额：</label>
                   <div class="col-sm-4">
                       <input type="text" class="form-control"  name="balance" placeholder="可以为0" value="0">
                       <span id="sp_balance"></span>
                   </div>
               </div>
               <div class="form-group">
                   <div class="col-sm-offset-2 col-sm-4">
                       <button  class="btn btn-success">开卡</button>
                   </div>

       </div>
</body>
</html>
